<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(lunboImg,index) in lunboImg" :key="index"><a :href="lunboImg.url"><img :src="lunboImg.image" /></a></div>
    </div>
    <!-- <div class="swiper-pagination"></div> -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  data () {
    return {
      lunboImg: [{
        id: '0',
        image: require('@/assets/images/banner.jpg'),
        url: '/'
      }, {
        id: '1',
        image: require('@/assets/images/banner.jpg'),
        url: '/'
      }]
    }
  },
  mounted () {
    setTimeout(() => {
      new Swiper('.swiper-container', {
        initialSlide: 0,
        autoHeight: true,
        spaceBetween: 20,
        loop: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/layout.scss";
</style>
